<style type="text/css">
    .center{text-align:center;}
</style>
<body>
<div class="bjy-admin-nav">
    <i class="fa fa-home"></i> 首页
    &gt;
    个人信息
<!--     &gt;
    修改头像 -->
</div>
<ul id="myTab" class="nav nav-tabs">
	<li >
        <a href="{:url('password')}">修改密码</a>
    </li>
<!--     <li class="active">
        <a href="{:url('head_img')}">修改头像</a>
    </li> -->
</ul>
<form class="form-inline" action="{:url('do_head_img')}" enctype='multipart/form-data' method='post'>
	<table class="table table-striped table-bordered table-hover table-condensed">
        <tr>
            <th class="center" style="width:100px;line-height:34px;">头像</th>
            <td>
                <input type="file" onchange="javascript:images_change()" id="fileimg" style='display:none'>
                <input type="hidden" name="pic" placeholder="点击上传名片" id='pic' value='0'>
                <img src="{$head_img}" height="200" width="200" onclick="javascript:$('#fileimg').click();" id="images" title="点击上传名片">
            </td>
        </tr>
        <tr>
            <th class="center" style="width:100px;line-height:34px;">上传头像</th>
            <td>
                <input type='file' name='head_img'/>
            </td>
        </tr>
        <tr>
            <th></th>
            <td>
                <input type='submit' value='提交'>
            </td>
        </tr>
    </table>
</form>
</body>
<script type="text/javascript">
    $('.submit').click(function(){
        var allright = true;
        $('input[name]').each(function(k,v){
            if($.trim($(v).val())==''){
                alert($(v).attr('placeholder'));
                allright = false;
                return false;
            }
        })

        if(!allright) return false;

        if($("[name='newpassword']").val() != $("[name='repassword']").val()){
            alert('两次密码不一致');return ;
        }

        var formdata = $('input[name]').serialize();

        $.post('',formdata,function(data){
            if(data.code){
                alert(data.msg);
                location.reload();
            }else{
                alert(data.msg);
            }
        },'json');
    });
</script>

<!-- base64处理 -->
<script>
    function images_change(){
        var pic = document.getElementById("images"), //显示图片的ID
                file = document.getElementById("fileimg"); // 上传图片按钮的ID
        var Suffix = file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
        // gif在IE浏览器暂时无法显示
        if(Suffix!='png' && Suffix!='jpg' && Suffix!='jpeg'){
            alert("图片的格式必须为png或者jpg或者jpeg格式！");return;
        }

        var isIE = navigator.userAgent.match(/MSIE/)!= null,
                isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null;

        if(isIE){
            file.select();
            var reallocalpath = document.selection.createRange().text;
            // IE6浏览器设置img的src为本地路径可以直接显示图片
            if(isIE6){
                pic.src = reallocalpath;
            }else {
                // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
                pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
                // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
                pic.src = '';
            }
        }else{
            var file = file.files[0];
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload = function(e){
                var pic = document.getElementById("images");
                var base64 = this.result;
                pic.src=this.result;
                // 将base64保存为图片
                $.post('/api/upload/pic', {'base64':base64, 'Suffix':Suffix}, function(data){
                    $('[name=pic]').val(data.filename);
                })
            }
        }
    }
</script>
<!-- base64处理 -->